<template>
	<view class="real">
		<view class="real-status">
			<view class="real-status-title">实名认证</view>
			<view :class="realStatus.color">{{ realStatus.name }}</view>
		</view>
		<view class="real-list">
			<van-cell-group>
				<van-field label="姓名" :value="userInfo.cname" placeholder="请输入身份证上的姓名" clearable @change="cRealName" />
				<van-field :value="userInfo.idcode" label="身份证号" placeholder="请输入身份证号" clearable :border="false" @change="cIdCards" />
			</van-cell-group>
		</view>
		<view class="real-list">
			<van-cell-group><van-field :value="userInfo.idCardFrontImgUrl" label="支付宝号" placeholder="请输入支付宝号" clearable @change="cBankCard" /></van-cell-group>
		</view>
		<view class="real-code">收款码</view>
		<view class="apply-license" style="margin-bottom: 20upx;">
			<view class="apply-license-wrap">
				<view class="licenseItem" @click="onLicensel">
					<view class="iconfont iconguanbi" @tap="clear" v-if="from.upfile"></view>
					<block v-if="from.upfile"><image :src="from.upfile" mode="aspectFit"></image></block>
					<block v-else>
						<view class="iconfont iconpaizhao"></view>
						<view class="text">上传支付宝收款码</view>
					</block>
				</view>
				<view class="licenseItem van-hairline--left">
					<block><image src="../../../static/code.png" mode="aspectFit"></image></block>
					<view class="text" style="line-height: 1.6;">示例</view>
				</view>
			</view>
		</view>
		<view class="tap"><text>注意：</text>请仔细核对实名信息，实名成功后只有两次修改机会！</view>
		<view class="real-btn"><button class="base-btn" @tap="onSubmit">提交</button></view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			from: {
				realName: '',
				idCards: '',
				idCardFrontImgUrl: '',
				upfile: ''
			},
			Licensel: ''
		};
	},
	onLoad() {
		this.setFromInfo();
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		}),
		realStatus() {
			switch (this.userInfo.examine) {
				case 0:
					return {
						name: '未认证',
						color: 'color-9b'
					};
				case 1:
					return {
						name: '认证成功',
						color: 'color8'
					};
				case -1:
					return {
						name: '认证失败',
						color: 'color7'
					};
				case 2:
					return {
						name: '待审核',
						color: 'color-9b'
					};
				default:
			}
		}
	},
	methods: {
		...mapActions(['setUserInfo']),
		onLicensel() {
			if (!this.from.upfile) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: res => {
						this.setInfo();
						this.from.upfile = res.tempFilePaths[0];
						this.Licensel = res.tempFilePaths[0];
					}
				});
				return;
			}
			uni.previewImage({
				urls: [this.from.upfile]
			});
		},
		onSubmit() {
			if (this.loading) return;
			const regSubmit = reg.regSubmit(this.from);
			if (regSubmit) {
				uni.showToast({
					title: regSubmit,
					icon: 'none'
				});
				return;
			}
			if (this.from.idCardFrontImgUrl.length < 1) {
				uni.showToast({
					title: '请填写支付宝号',
					icon: 'none'
				});
				return;
			}
			if (!this.Licensel.length) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				title: '提示',
				content: '请再三确认信息无误，实名成功后只有两次修改机会!',
				success: (res) => {
					if (res.confirm) {
						this.loading = true;
						uni.showLoading({ title: '' });
						this.$http
							.upload_one('/app/member/realname', {
								aliAccount: this.from.idCardFrontImgUrl,
								cname: this.from.realName,
								idcode: this.from.idCards,
								upfile: this.from.upfile
							})
							.then(res => {
								const data = JSON.parse(res.data);
								this.loading = false;
								if (data.success) {
									uni.showToast({
										title: '认证提交成功'
									});
									this.userInfo.examine = 2;
									this.setInfo();
									return;
								}
								uni.showToast({
									title: data.errMsg,
									icon: 'none'
								});
							});
					}
				},
			})
		},
		setInfo() {
			// 存储数据
			this.userInfo.cname = this.from.realName;
			this.userInfo.idcode = this.from.idCards;
			this.userInfo.idCardFrontImgUrl = this.from.idCardFrontImgUrl;
			this.setUserInfo(this.userInfo);
		},
		setFromInfo() {
			this.from.realName = this.userInfo.cname;
			this.from.idCards = this.userInfo.idcode;
			this.from.idCardFrontImgUrl = this.userInfo.idCardFrontImgUrl;
			if (this.userInfo.aplimgUrl) {
				this.from.upfile = this.$imgUrl + this.userInfo.aplimgUrl;
			}
		},
		clear() {
			this.from.upfile = '';
			this.Licensel = '';
		},
		cRealName(e) {
			if (typeof e.detail === 'object') return;
			this.from.realName = e.detail;
			this.userInfo.cname = e.detail;
		},
		cIdCards(e) {
			if (typeof e.detail === 'object') return;
			this.from.idCards = e.detail;
			this.userInfo.idcode = e.detail;
		},
		cBankCard(e) {
			if (typeof e.detail === 'object') return;
			this.from.idCardFrontImgUrl = e.detail;
			this.userInfo.idCardFrontImgUrl = e.detail;
		}
	}
};
</script>

<style lang="scss" scoped>
.real {
	&-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx;
		&-title {
			font-size: 40upx;
			font-weight: 600;
		}
		&-type {
		}
	}
	&-list {
		margin-bottom: 20upx;
	}
	&-code {
		padding: 30upx;
	}
}
.apply {
	padding: 20upx 0 160upx 0;
	&-cell {
		display: flex;
		.van-cell-text {
			width: 80px;
		}
	}
	&-license {
		padding: 0 20upx;
		&-wrap {
			display: flex;
			border: 2upx solid #7e7e7e;
			background-color: #fff;
			.licenseItem {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				align-content: center;
				width: 50%;
				height: 300upx;
				padding: 20upx;
				text-align: center;
				.iconpaizhao {
					width: 100%;
					line-height: 1;
					font-size: 100upx;
					color: #9b9b9b;
				}
				.iconguanbi {
					position: absolute;
					z-index: 99;
					right: -10upx;
					top: -20upx;
					width: 50upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 40upx;
					color: #fff;
					border-radius: 50upx;
					background-color: red;
				}
				.text {
					width: 100%;
					line-height: 1;
					color: #9b9b9b;
				}
			}
		}
	}
}
.tap {
	padding: 20upx;
	text{ color: red; }
}
.real-btn {
	padding: 50upx 60upx;
}
</style>
